<template>
    <div class="app-container">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="医院名称">
                <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input>
            </el-form-item>
            <el-form-item label="医院编号">
                <el-input v-model="searchObj.hoscode" placeholder="医院编号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getHospSet()">查询</el-button>
            </el-form-item>

        </el-form>
        <el-button type="danger" @click="deletehospsetIds()">批量删除</el-button>
            
        <el-table
                :data="list"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
            <el-table-column
                    align="center"
                    prop="id"
                    label="编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="hosname"
                    label="医院名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="hoscode"
                    label="医院编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="apiUrl"
                    label="api基础路径"
                    width="180">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="contactsName"
                    label="联系人姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="contactsPhone"
                    label="联系人手机"
                    width="180">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="status"
                    label="状态"
                    width="180">
                    <template slot-scope="scope">
                        {{ scope.row.status === 1 ? '可用' : '不可用'}}
                    </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <!--
                    slot-scope：作用域插槽，可以获取表格数据
                    scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
                -->
                <template slot-scope="scope">
                    
                    <el-button type="danger" icon="el-icon-delete" @click="deletehospset(scope.row.id)" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
       <!-- 分页-->
        <el-pagination
                @size-change="getHospSet"
                @current-change="getHospSet"
                :current-page.sync="currentPage"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>
<script>
import hospsetApi from '@/api/hospset'
export default{
    data() {
        return {
            list: [],
            currentPage:1,
            limit:3,
            total:0,
            searchObj:{},
            multipleSelection: []

        }
    },
    methods: {
        getHospSet(page=1){
            this.currentPage=page
           // console.log(this.currentPage)
            console.log(this.limit)
            //console.log(this.page-sizes)
            console.log(this.searchObj.hosname)
            console.log(this.searchObj.hoscode)
            hospsetApi.getHospSetPageList(this.currentPage,this.limit,this.searchObj).then(res=>{
                console.log(res)
                this.list=res.data.records
                this.total=res.data.total
            })
        },
        deletehospset(id) {
            this.$confirm('确定要删除此纪录吗？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  //删除
                 hospsetApi.deleteById(id).then(res=>{
                      this.$message({
                          type: 'success',
                          message: '删除成功!'
                      });
                      //刷新列表
                      this.getHospSet()
                  })
              }).catch(() => {
                  this.$message({
                      type: 'info',
                      message: '已取消删除'
                  });
              });
        },
        deletehospsetIds() {
            this.$confirm('确定要删除此纪录吗？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  //删除
                  var ids=[];
                  for (var i = 0; i < this.multipleSelection.length; i++) {
                    var obj=this.multipleSelection[i];
                    ids.push(obj.id);
                  }
                 hospsetApi.deleteByIds(ids).then(res=>{
                      this.$message({
                          type: 'success',
                          message: '删除成功!'
                      });
                      //刷新列表
                      this.getHospSet()
                  })
              }).catch(() => {
                  this.$message({
                      type: 'info',
                      message: '已取消删除'
                  });
              });
        },
        handleSelectionChange(val) {
            console.log(val);
            this.multipleSelection=val;
            console.log("数组赋值下标"+this.multipleSelection)
        }
    },
    created() {
        this.getHospSet()
    }
}
 
</script>